{extend name="default/template/base_index" /}

{block name="area_header"}
    <link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
    <style>.pink{color:pink;}</style>
    <link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
    <link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/cosmo-skin.css" />
    <script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
{/block}

{block name="area_body"}
    {include file="default/Widget/topbar" /}
    <div class="admin-main container-fluid">
        {include file="default/Widget/left" /}
        <div class="admin-main-content">
            {include file="default/Widget/breadcrumb" /}
            <!-- 过滤\查询按钮 -->
            <div class="filter-controls">
                {:W('OrgArea/area')}
                <!-- 日期查询 -->
                <form action="{:url('Statistics/index')}" method="post" class="searchForm form-inline">
                    <div class="form-group row  col-lg-12 col-md-12">
                        <div class="input-group " style="  width: 780px;">
                            <div class="input-group-addon input-sm">支付状态</div>
                            <div class="form-control input-sm">
                                <label class="radio-inline">
                                    <input type="radio" name="paystatus" class="paystatus" <eq name="payStatus" value="">checked="checked"{/eq} value="">不限
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="paystatus" class="paystatus" <eq name="payStatus" value="0">checked="checked"{/eq} value="0">待支付
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="paystatus" class="paystatus" <eq name="payStatus" value="1">checked="checked"{/eq} value="1">已支付
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="paystatus" class="paystatus" <eq name="payStatus" value="2">checked="checked"{/eq} value="2">已退款
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row col-lg-12 col-md-12">
                        <div class="input-group" style="  width: 860px;">
                            <div class="input-group-addon input-sm">订单状态</div>
                            <div class="form-control input-sm">
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="">checked="checked"{/eq} value="">不限
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="2">checked="checked"{/eq} value="2">待确认
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="3">checked="checked"{/eq} value="3">待发货
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="4">checked="checked"{/eq} value="4">已发货
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="5">checked="checked"{/eq} value="5">已收货
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="6">checked="checked"{/eq} value="6">已退货
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="7">checked="checked"{/eq} value="7">已完成
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="8">checked="checked"{/eq} value="8">已取消
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderstatus" class="orderstatus" <eq name="orderStatus" value="12">checked="checked"{/eq} value="12">被退回
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-lg-12 col-md-12">
                        <div class="input-group">
                            <div class="input-group-addon input-sm">
                                时间
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="text" name="startdatetime" id="startdatetime" class="form-control input-short input-sm" value="{$startdatetime}" />
                            <div class="input-group-addon input-sm">
                                <i class="fa fa-long-arrow-right"></i>
                            </div>
                            <input type="text" name="enddatetime" id="enddatetime" class="form-control input-short input-sm" value="{$enddatetime}" />
                        </div>
                        <button type="submit" class="btn btn-default btn-sm btn-search"><i class="fa fa-search"></i>统计</button>
                    </div>
                </form>
            </div>
            <!-- 操作按钮 -->
            <div class="btn-controls">
            </div>
            <table class="table table-striped table table-hover  table-condensed">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="selectall" onclick="myUtils.selectall(this,'.selectitem');" />
                    </th>
                    <th>
                        订单编号
                    </th>
                    <th>
                        下单用户
                    </th>
                    <th>
                        下单时间
                    </th>
                    <th>
                        收货人
                    </th>
                    <th>
                        联系号码
                    </th>
                    <th>
                        订单金额(元)
                    </th>
                    <th>
                        订单状态
                    </th>
                </tr>
                </thead>
                <tbody>
                {empty name="list"}
                    <tr>
                        <td colspan="10" class="text-center">{:L('NO_DATA')}</td>
                    </tr>
                    {else/}
                    {volist name="list" id="vo"}
                        <tr>
                            <td>
                                <input type="checkbox" value="{$vo.id}" name="ids[]" class="selectitem" />
                            </td>
                            <td>
                                <a href="{:url('Orders/view',array('id'=>$vo['id']))}">{$vo.order_code}</a>
                            </td>
                            <td>
                                <a href="{:url('CustomerInfo/index',array('id'=>$vo['uid']))}">{$vo.username}</a>
                            </td>
                            <td>
                                {$vo.createtime|date='Y-m-d H:i:s',###}
                            </td>
                            <td>
                                {$vo.contactname}
                            </td>
                            <td>
                                {$vo.mobile}
                            </td>
                            <td>
                                {$vo['price']}
                            </td>
                            <td>
                                [{$vo.pay_status|getPayStatus}]|[{$vo.order_status|getOrderStatus}]|[{$vo.comment_status|getCommentStatus}]
                            </td>
                        </tr>
                    {/volist}
                {/empty}
                <tr class="success">
                    <td colspan="1">合计订单数</td>
                    <td colspan="4">{$count}</td>
                    <td colspan="1">合计订单金额</td>
                    <td colspan="1">{$sum}</td>
                    <td colspan="2"></td>
                </tr>
                </tbody>
            </table>
            <div>{$show}</div>
            <div id="chart" style="height:400px;width:auto;"></div>


        </div>
        <!-- END admin-main-content -->
    </div>
    <!-- END admin-main-->
{/block}
{block name="area_footer"}
    <script src="__CDN__/echarts/2.2.2/echarts-all.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".orderstatus").click(function(){
                $(".searchForm").submit();
            });
            $(".paystatus").click(function(){
                $(".searchForm").submit();
            })

            $('#startdatetime').datetimepicker({
                lang: 'ch',
                format:'Y-m-d H:i:s',
            });
            $('#enddatetime').datetimepicker({
                lang: 'ch',
                format:'Y-m-d H:i:s',
            });
        });

        $('.btn-search').click(function(){
            getData();
        });
        function getData(){
            var sel_sku = getSku();
            var select_product = $('#select_product').select2('val');
            var startdatetime = $('.startdatetime').val();
            var enddatetime = $('.enddatetime').val();
            $.ajax({
                url:"{:url('Statistics/index')}",
                data:{
                    startdatetime:startdatetime,
                    enddatetime:enddatetime
                },
                type:'post',
                dataType:'json',
                success:function(data){
                    if(data.status){
                        getChart(data.info);
                    }else{
                        alert(data.info);
                        //console.log(data.info);
                    }
                },
                error:function(){
                    alert("数据异常");
                }
            });
        }
        function getChart(data){
            var myChart = echarts.init(document.getElementById('chart'));
            var option = {
                title : {
                    text: '库存与销售情况',
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['库存剩余量','销售量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        //data : ['周一','周二','周三','周四','周五','周六','周日']
                        data : data.x
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    }
                ],
                series : [
                    {
                        name:'库存剩余量',
                        type:'line',
                        //data:[11, 11, 15, 13, 12, 13, 10],
                        data:data.quantity,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'销售量',
                        type:'line',
                        //data:[1, -2, 2, 5, 3, 2, 0],
                        data:data.sale,
                        markPoint : {
                            data : [
                                /*{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}*/
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>
{/block}